<template>
  <div class="login-container">

    <el-form ref="ruleFormRef" :model="form" class="login-form" :rules="rules">
      <!--   登录的title   -->
      <div class="title-container">
        <h3 class="title">{{$t("login.title")}}</h3>
      </div>
      <!--   必须统一rule中的字符和model的字符名,否则无法校验   -->
      <!--   用户名输入框   -->
      <el-form-item prop="username">
        <el-icon :size="20" class="svg-container">
          <SvgIcon icon="user"></SvgIcon>
        </el-icon>
        <el-input v-model="form.username"/>
      </el-form-item>
      <!--   密码输入框   -->
      <el-form-item prop="password">
        <el-icon :size="20" class="svg-container">
          <SvgIcon icon="password"></SvgIcon>
        </el-icon>
        <el-input v-model="form.password" :type="showPasswordType"/>
        <!--    点击眼睛按钮时,切换眼睛并显示是否显示密码    -->
        <el-icon class="svg-container">
          <SvgIcon :icon="showPasswordIcon" @click="changeShowPassword"></SvgIcon>
        </el-icon>
      </el-form-item>
      <!--  登录按钮  -->
      <el-form-item>
        <el-button type="primary" class="login-button" @click="submitForm(ruleFormRef)">
          {{$t("login.title")}}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import {loginStore} from "@/store/modules/loginStore.js";

const form = reactive({
  username: 'admin',
  password: '123456',
})

/* 表单校验 */
const rules = reactive({
  username: [
    {required: true, message: '请输入正确的用户名', trigger: 'blur'},
    {min: 3, max: 5, message: '只能输入3~5个字符', trigger: 'blur'},
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
  ],
})

// 声明接收到的
const ruleFormRef = ref()
// 获得 store 信息
const store=loginStore()
// 点击登录按钮
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      store.login(form)
    } else {
      console.log('error submit!', fields)
    }
  })
}

/* 密码是否显示 */
// 是否显示密码
const isShowPassword = ref(false)
// 密码状态变更时图片
const showPasswordIcon = computed(() => {
  return isShowPassword.value ? 'eye-open' : 'eye'
})
// 输入栏密码状态
const showPasswordType = computed(() => {
  return isShowPassword.value ? 'text' : 'password'
})
// 点击眼睛时切换显示状态
const changeShowPassword = () => {
  isShowPassword.value = !isShowPassword.value;
}

</script>

<style lang="scss" scoped>
@import '@/styles/login.scss';
</style>
